<template>
    <div class="max-w-[500px]">
        <avue-form :option="option" v-model="form" @submit="submit"></avue-form>
        <div class="bg-gray-100 p-4 rounded mb-2">
            <div>名称: {{ selectedValue.name }}</div>
            <div>sdk: {{ selectedValue.sdk }}</div>
            <div>model: {{ selectedValue.model }}</div>
            <div>baseURL: {{ selectedValue.baseURL }}</div>
            <div>apiKey: ******</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getList } from '@/apis/commonCrud'
import cloneDeep from 'lodash/cloneDeep'
import { ref, watch } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue', 'submit'])

let currentPageData: any[] = []

const form = ref<any>({
    name: '',
})

const selectedValue = ref({
    id: 1,
    name: '加载中...',
    sdk: '',
    model: '',
    apiKey: '',
    baseURL: '',
})

const option = ref({
    menuSpan: 5,
    emptyBtn: false,
    submitText: '保存',
    labelWidth: 0,
    column: [
        {
            label: '',
            prop: 'name',
            type: 'table',
            multiple: false,
            span: 19,
            children: {
                column: [
                    {
                        label: '名称',
                        prop: 'name',
                        search: true,
                    },
                    {
                        label: 'SDK',
                        prop: 'sdk',
                    },
                    {
                        label: 'baseURL',
                        prop: 'baseURL',
                    },
                    {
                        label: 'apiKey',
                        prop: 'apiKey',
                        formatter(_form, val) {
                            return val.length > 0 ? '******' : ''
                        },
                    },
                    {
                        label: 'model',
                        prop: 'model',
                    },
                ],
            },
            onLoad: async ({ page, value, data }, callback) => {
                if (value) {
                    const res = await getList('bigModelConfigs', {
                        id: value,
                        type: 'chat',
                        page: 1,
                        pageSize: 1,
                    })
                    if (res.success) {
                        callback(res.data.rows[0])
                        return
                    }
                }
                if (!page) return
                const res = await getList('bigModelConfigs', {
                    ...data,
                    type: 'chat',
                    page: page.currentPage,
                    pageSize: 10,
                })
                if (res.success) {
                    currentPageData = cloneDeep(res.data.rows)
                    callback({
                        total: res.data.count,
                        data: res.data.rows,
                    })
                }
            },
            formatter: (row) => {
                return row.name
            },
            props: {
                disabled: 'disabled',
                label: 'name',
                value: 'id',
            },
        },
    ],
})

watch(
    () => props.modelValue,
    (newVal) => {
        // console.log('props')
        // console.log(newVal)
        if (newVal) {
            form.value.name = newVal.id
            selectedValue.value = newVal
        }
    }
)

watch(
    () => form.value.name,
    (newVal) => {
        const selected = currentPageData.find((v) => v.id === +newVal)
        // selectedValue.value = selected
        // console.log(selected)
        emit('update:modelValue', selected)
        // console.log(newVal)
    }
)

const submit = (_form, done) => {
    emit('submit', selectedValue.value, done)
}
</script>
